{% extends "base.html" %}

{% block extrajs %}
{% if authenticated and funnel_auth %}
<script type="text/javascript">
var drag_and_drop_handler = function(event,ui) {
    $('tbody.sortable_table').sortable('disable');
    var sorted_cards = $('tbody.sortable_table').sortable('serialize', {
        expression: /(.+)[_](.+)/
    });
    $.ajax({
        type: "POST",
        data: sorted_cards,
        url: "/funnel/" + '{{ state_slug }}' + "/",
        error: function(jqXHR, textStatus, errorThrown) {
            window.alert(textStatus + ": " + errorThrown);
        },
        success: function(data, textStatus, jqXHR) {
            $('tbody.sortable_table').sortable('enable');
            var response = $.parseJSON(data);
            if (window.console) {
                console.log(textStatus + ": " + data['message']);
            }
        }
    });
}

$(document).ready(function() {
    $('tbody.sortable_table').on('sortupdate', drag_and_drop_handler);
    $('tbody.sortable_table').sortable('enable');
});
</script>
{% endif %}
{% endblock extrajs %}

{% block content %}

{% import "card_macros.html" as card_macros %}

<p class="nav">
{% for team in teams %}
    <a href="{{ url_for('team', team_slug=team.slug) }}">{{ team.name }}</a>{% if not loop.last %} / {% endif %}
{% endfor %}
</p>


<table class="funnel" id="content_detail">
<thead>
    <caption>{{ state.replace("Backlog", "Ready: Elabo").replace("OTIS", "TIE") }}: {{ cards|length }}</caption>
    <tr>
        <th class="reorder_col">&nbsp;</th>
        <th class="ordering_col">#</th>
        <th class="key_col">Ticket</th>
        <th class="cycle_col">In State</th>
        <th class="title_col">Title</th>
        <th class="sclass_col">Service Class</th>
        <th class="due_col">Due date</th>
        <th class="type_col">Type</th>
    </tr>
</thead>

<tbody class="sortable_table">
 {% for card in cards %}
     {% if funnel_throughput and funnel_markers %}
        {%- if loop.index0 % funnel_throughput == 0 %}
            <tr class="backlog_marker ui-state-disabled">
                <td colspan="8">
                    Around {{ funnel_markers.pop(0).strftime("%m/%d") }}
                </td>
            </tr>
        {% endif %}
    {% endif %}

    <tr class="{{ loop.cycle('odd', 'even') }} card_in_backlog" id="card_{{ card.key }}">
        <td {% if funnel_auth %}class="reorder"><i class="icon-move"></i>{% else %}>&nbsp;{% endif %}</td>

        <td>{{ loop.index }}</td>

        <td>
            <a href="{{ card.ticket_system.get_ticket_url() }}">{{ card.key }}</a>
        </td>

        <td>{{ card_macros.hours_to_days(times_in_state[card.key]) }}</td>

        <td>
            <a href="{{ url_for('card', key=card.key) }}">{{ card.ticket_system_data.get('summary', card.title) }}</a>
        </td>

        <td>{{ card.service_class['name'] }}</td>

        <td>{% if card.due_date %}{{ card.due_date.strftime("%m/%d") }}{% endif %}</td>

        <td>{{ card.type }}</td>
    </tr>
    {% endfor %}
</tbody>

</table>


{% endblock content %}
